import React from "react";
import { useState } from 'react';
import './list.scss'
const List = (props)=> {
  const [list,setList] = useState(props)
  const [isShow,setisShow] = useState(false)
  console.log(list);
 //清空
  const dellist = ()=>{
     console.log(props,123);
      props.list.list.length=0
      let Lists = list.list
      setList({
        ...list,
        list:Lists
      })
  }
  //排序图标
  const onCliisShow = ()=>{
     setisShow(!isShow)
  }

    return ( 
      <div className="list">
        <div className="title">
          <span>标题</span>
          <span>日期</span>
          <span onClick={onCliisShow}>优先级
          </span>
          <div onClick={onCliisShow} className="isShow">{
               isShow ? <div>↑</div> : <div>↓</div>
              }
          </div>
         
         
        </div>
        {
          props.list.list.map((item,index)=>{
                 return (
                  <div key={index} className='content'>
                    <li>{item.title}</li> 
                    <li>{item.date}</li> 
                    <li style={ item.priority === '1' ? {color:'red'} : item.priority === '2' ? {color:'blue'}:{color:'green'}}>{item.priority}</li> 
                  </div>
                 )
          })  
        }
        <button onClick={dellist} className='btn'>清空</button>
      </div>
     );
}
 
export default List;